在Web开发中，事件冒泡和默认事件是常见的概念。事件冒泡指的是当一个事件发生在某个元素上时，它会首先在该元素上触发，然后逐层向上冒泡到其父元素，直到根元素（通常是document）为止。而默认事件是浏览器为某些特定事件类型内置的行为，例如点击链接时浏览器默认会导航到链接指向的页面，或者按下提交按钮时默认会提交表单。

要阻止这些行为，可以采取以下方法：

阻止事件冒泡

1. 使用event.stopPropagation()方法：

   • 在事件处理程序中，可以调用event.stopPropagation()来阻止事件继续冒泡。这会停止事件从当前元素冒泡到其父元素。
   • 示例代码：

   document.getElementById('btn').addEventListener('click', function(event) {
       event.stopPropagation(); // 阻止事件冒泡
       alert('按钮被点击');
   });
   

2. 使用cancelBubble属性：

   • 这是早期IE浏览器提供的一种阻止事件冒泡的方法，现在仍然兼容大部分现代浏览器。
   • 示例代码：

   elem.onclick = function(event) {
       event.cancelBubble = true; // 阻止事件冒泡
   };
   

3. 使用return false语句：

   • 在HTML中，可以通过返回false来阻止事件冒泡。但需要注意的是，这种方法只能用于直接绑定事件处理函数的情况，不能用于addEventListener()函数进行事件绑定。
   • 示例代码：

   <button id="btn" onclick="alert('按钮被点击'); return false;">点击我</button>
   

4. 使用event.stopImmediatePropagation()方法：

   • 该方法不仅可以阻止事件冒泡，还可以阻止同一元素上其他事件处理函数的执行。
   • 示例代码：

   elem.addEventListener('click', function(event) {
       console.log('事件处理函数1');
       event.stopImmediatePropagation(); // 阻止事件冒泡和其他事件处理函数的执行
   });
   elem.addEventListener('click', function(event) {
       // 这个事件处理函数不会被执行
       console.log('事件处理函数2');
   });
   

阻止默认事件

1. 使用event.preventDefault()方法：

   • 在事件处理程序中，可以调用event.preventDefault()来阻止默认事件的发生。
   • 示例代码：

   document.getElementById('link').addEventListener('click', function(event) {
       event.preventDefault(); // 阻止默认事件
       alert('链接被点击，但不会导航到其他页面');
   });
   

2. 使用return false语句：

   • 在HTML中，也可以通过返回false来阻止默认事件。但同样需要注意，这种方法只能用于直接绑定事件处理函数的情况。
   • 示例代码：

   <a id="link" href="https://www.example.com" onclick="alert('链接被点击'); return false;">点击我</a>
   

同时阻止事件冒泡和默认事件

在某些情况下，可能需要同时阻止事件冒泡和默认事件。这时可以结合使用event.preventDefault()方法和event.stopPropagation()方法。

示例代码：

document.getElementById('form').addEventListener('submit', function(event) {
	event.preventDefault(); // 阻止表单提交
	event.stopPropagation(); // 阻止事件冒泡
	alert('表单已提交，但已被阻止');
});

总之，阻止事件冒泡和默认事件是Web开发中的重要技巧，可以帮助实现更复杂的交互行为和提供更好的用户体验。但应谨慎使用这些技术，以确保用户体验的一致性和可用性。